<script setup>
import image32 from '@/assets/images/32.png';
import tub1 from '@/assets/images/tub1.png';
import tub2 from '@/assets/images/tub2.png';
import tub3 from '@/assets/images/tub3.png';
import tub4 from '@/assets/images/tub4.png';
import tub5 from '@/assets/images/tub5.png';
import tub6 from '@/assets/images/tub6.png';
import tub7 from '@/assets/images/tub7.png';
import tub8 from '@/assets/images/tub8.png';
import { ref, computed, onMounted, onUnmounted } from 'vue';

// --- 2. 统一管理所有可放大的图片 ---
const galleryImages = [
  image32, tub1, tub2, tub3, tub4, tub5, tub6, tub7, tub8, image32 // 重复的 image32 也加进来
];

// --- 3. 图片查看器状态 ---
const isViewerOpen = ref(false);
const currentIndex = ref(0); // 不再是 src，而是当前图片的索引

// --- 4. 计算属性，获取当前图片的 src ---
const currentImageSrc = computed(() => {
  return galleryImages[currentIndex.value];
});

// --- 5. 更新后的方法 ---
function openImageViewer(index) {
  currentIndex.value = index;
  isViewerOpen.value = true;
}

function closeViewer() {
  isViewerOpen.value = false;
}

function nextImage() {
  currentIndex.value = (currentIndex.value + 1) % galleryImages.length; // 循环到第一张
}

function prevImage() {
  currentIndex.value = (currentIndex.value - 1 + galleryImages.length) % galleryImages.length; // 循环到最后一张
}

// --- 6. 新增：键盘导航 ---
function handleKeydown(e) {
  if (!isViewerOpen.value) return;
  if (e.key === 'ArrowRight') nextImage();
  if (e.key === 'ArrowLeft') prevImage();
  if (e.key === 'Escape') closeViewer();
}

onMounted(() => {
  window.addEventListener('keydown', handleKeydown);
});
onUnmounted(() => {
  window.removeEventListener('keydown', handleKeydown);
});

</script>

<template>
  <!-- 使用 v-container 控制整体布局和边距 -->
  <v-container class="page-container">
    <!-- 1. 顶部导航栏 -->
    <v-app-bar flat color="white" class="top-nav">
      <v-toolbar-title>
        <!-- 网站 Logo -->
        <span class="logo-text">小牛行研</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <!-- 搜索框 -->
      <v-text-field
          density="compact"
          variant="outlined"
          label="搜索"
          prepend-inner-icon="mdi-magnify"
          single-line
          hide-details
          class="search-bar"
      ></v-text-field>
      <v-spacer></v-spacer>
      <!-- 导航链接 -->
      <v-btn text>查数据</v-btn>
      <v-btn text>找报告</v-btn>
      <v-btn text>价格</v-btn>
      <v-btn text>课程</v-btn>
      <v-divider vertical class="mx-2"></v-divider>
      <v-btn text>登录</v-btn>
      <v-btn color="primary" variant="flat">注册</v-btn>
    </v-app-bar>

    <!-- 主内容区 -->
    <v-main class="main-content">
      <!-- 2. 面包屑导航和标题 -->
      <div class="header-section">
        <v-breadcrumbs :items="['首页', '行业研究', '汽车']" class="pa-0 mb-4"></v-breadcrumbs>
        <h1 class="report-title">乘用车整车行业2025年中期投资策略：政策促需 高端加速 智能升级</h1>
        <div class="report-meta">
          <span>报告日期：2025-06-17</span>
          <span>74个图表</span>
        </div>
      </div>

      <!-- 3. 第一个大图表 (32.png) -->
      <div class="content-block">
        <v-img :src="image32" class="zoomable-image" @click="openImageViewer(0)"></v-img>
        <p class="image-caption">主要国家地区进口车关税政策</p>
      </div>

      <!-- 4. 研究报告节点 -->
      <div class="content-block">
        <div class="summary-box">
          <h3 class="summary-title">研究报告节选</h3>
          <p class="summary-text">
            多国关税调整，海外建厂已成趋势。俄罗斯作为中国汽车主要出口市场，近期调整进口关税，要求补缴欧亚经济联盟国家进口汽车的各项税费，并增设逐年递增的报废税；欧盟也对中国的纯电汽车征收为期五年的最终反补贴税。印尼则对在当地建厂或投资的纯电动车企实行了激励税收优惠。伴随 2024 年起多国关税调整，自主汽车出口成本与海外销售难度日益加大，越来越多的自主车企选择海外建厂，以本土化生产减轻关税负担。
          </p>
        </div>
      </div>

      <!-- 5. 相关图表网格布局 -->
      <div class="content-block">
        <h2 class="section-title">相关行业研究图表</h2>
        <v-row>
          <!-- 关键改动: 为所有图片添加 class 和 @click 事件 -->
          <v-col cols="12" md="4">
            <v-img :src="tub1" class="zoomable-image" @click="openImageViewer(tub1)"></v-img>
          </v-col>
          <v-col cols="12" md="4">
            <v-img :src="tub2" class="zoomable-image" @click="openImageViewer(tub2)"></v-img>
          </v-col>
          <v-col cols="12" md="4">
            <v-img :src="tub3" class="zoomable-image" @click="openImageViewer(tub3)"></v-img>
          </v-col>
          <v-col cols="12" md="4">
            <v-img :src="tub4" class="zoomable-image" @click="openImageViewer(tub4)"></v-img>
          </v-col>
          <v-col cols="12" md="4">
            <v-img :src="tub5" class="zoomable-image" @click="openImageViewer(tub5)"></v-img>
          </v-col>
          <v-col cols="12" md="4">
            <v-img :src="tub6" class="zoomable-image" @click="openImageViewer(tub6)"></v-img>
          </v-col>
        </v-row>
      </div>

      <!-- 6. 更多图表和文字内容 -->
      <div class="content-block">
        <h2 class="section-title">相关行业研究报告</h2>
        <h3>乘用车整车行业2025年中期投资策略：政策促需 高端加速 智能升维
        </h3>
        <v-row>
          <!-- 为所有图片添加 class 和 @click 事件 -->
          <v-col cols="12" md="4">
            <v-img :src="tub7" class="zoomable-image" @click="openImageViewer(tub7)"></v-img>
          </v-col>
          <v-col cols="12" md="4">
            <v-img :src="tub8" class="zoomable-image" @click="openImageViewer(tub8)"></v-img>
          </v-col>
          <v-col cols="12" md="4">
            <v-img :src="image32" class="zoomable-image" @click="openImageViewer(image32)"></v-img>
          </v-col>
        </v-row>
        <p class="source-text2">
          民生证券 | 2025-06-17 | 74个图表
        </p>
      </div>

      <!-- 7. 报告内容详情 -->
      <div class="content-block">
        <h3 class="content-subtitle">表32：主要国家汽车进口关税政策</h3>

        <v-table class="policy-table">
          <thead>
          <tr>
            <th class="text-center font-weight-bold ">国家</th>
            <th class="text-left font-weight-bold">地区</th>
            <th class="text-left font-weight-bold">关税政策</th>
          </tr>
          </thead>
          <tbody>
          <!-- 中东 -->
          <tr>
            <td rowspan="1" class="region-cell">中东</td>
            <td class="font-weight-bold">土耳其</td>
            <td>土耳其对进口自中国的汽车征收40%的额外关税，7月7日起，每辆来自中国的汽车将额外加征至少7,000美元关税。</td>
          </tr>

          <!-- 东南亚 -->
          <tr>
            <td rowspan="2" class="region-cell">东南亚</td>
            <td class="font-weight-bold">印尼</td>
            <td>
              非东盟国家向印尼出口传统燃油车一般需缴纳10%的关税，部分产品甚至高达50%。印尼在中国-东盟自贸区的基础上，新增给予我国700多个税号产品零关税待遇，这些产品涵盖了包括部分汽车零部件、摩托车等在内的多个品类。
              <br><br>
              2023年12月29日起至2025年12月31日，无论纯电动汽车是整车进口(CBU)或组装进口(CKD)，相关纯电动车企业都可免缴进口关税。如果纯电动汽车属于整车进口类型，则政府将承担其在销售过程中的奢侈品销售税：如果纯电动车属于组装进口类型，则政府将承担其在进口过程中的奢侈品销售税。
            </td>
          </tr>
          <tr>
            <!-- <td>东南亚</td>  (被 rowspan 占据) -->
            <td class="font-weight-bold">泰国</td>
            <td>
              2024年1月2日起，售价不超过200万泰铢，且电池容量为50kWh以上的电动车，第一年可获得10万泰铢补贴，第二年降为7.5万泰铢，第三年降为5万泰铢：售价不超过200万泰铢，电池容量为50kWh以上的电动车，且为泰国当地生产车型，可获得为期4年的10万泰铢补贴：此外，部分满足标准的电动汽车，还可享受最高20%的进口关税减免、消费税从8%降低至2%等优惠。
            </td>
          </tr>

          <!-- 南美 -->
          <tr>
            <td rowspan="1" class="region-cell">南美</td>
            <td class="font-weight-bold">巴西</td>
            <td>自2024年7月起针对进口纯电动汽车、油电混合动力汽车和插电式混合动力汽车的关税分别调整至18%、25%、20%；2025年7月为25%、30%、28%，2026年7月均升至35%。</td>
          </tr>

          <!-- 欧洲 -->
          <tr>
            <td rowspan="3" class="region-cell">欧洲</td>
            <td class="font-weight-bold">英国</td>
            <td>退欧后维持对汽车征收10%关税。</td>
          </tr>
          <tr>
            <!-- <td>欧洲</td> (被 rowspan 占据) -->
            <td class="font-weight-bold">欧盟</td>
            <td>欧盟决定对从中国进口的电动汽车(BEV)征收为期五年的最终反补贴税，将于2024年10月31日起正式实施：对比亚迪征收17.0%关税，对吉利征收18.8%关税，对上汽集团征收35.3%关税，对其他公司征收20.7%-35.3%关税。</td>
          </tr>
          <tr>
            <!-- <td>欧洲</td> (被 rowspan 占据) -->
            <td class="font-weight-bold">俄罗斯</td>
            <td>自2022年起俄罗斯对进口电动车征收15%的关税。2024年4月1日起从吉尔吉斯斯坦、哈萨克斯坦、亚美尼亚或白俄罗斯等欧亚经济联盟国家进入俄罗斯的汽车，清关汽车节省的一切费用必须补齐，包括关税、增值税和消费税等。将于2024年10月1日起上张车辆报废税70%-85%，自2025年1月起每年继续上涨10%-20%。</td>
          </tr>

          </tbody>
        </v-table>
        <p class="source-text">
          资料来源：商务部，中汽协，中国汽研等公开资料整理，民生证券研究院
        </p>
      </div>

      <!-- 8. 其他行业调研报告列表 -->
      <div class="content-block other-reports">
        <h2 class="section-title">其他行业调研报告</h2>
        <ul>
          <li>计算机行业点评报告：Scale AI：AI时代卖水人 - 2025-08-04</li>
          <li>流动性与仓位跟踪观察——8月第1周：资金净流入，交投活跃度下跌 - 2025-08-04</li>
          <li>九号公司：2季度两轮车销量延续高增态势，盈利能力进一步提升；维持买入 - 2025-08-04</li>
          <li>嘉和美康: 电子病历龙头，深度拓展AI应用 - 2025-08-04</li>
          <li>估值与盈利周观察——8月第1期：调整 - 2025-08-04</li>
          <li>医药日报：罗氏Trontinemab早期临床结果亮眼，用于治疗AD - 2025-08-04</li>
          <li>A股投资策略周报告：调整企稳后将延续向上运行 - 2025-08-04</li>
          <li>电子行业周报：北美云厂商资本开支持续扩张，AI算力需求强劲 - 2025-08-04</li>
          <li>2025年海外游戏市场洞察 - 2025-08-04</li>
          <li>淘宝服饰趋势洞察2025年8月刊 - 2025-08-04</li>
        </ul>
      </div>

    </v-main>

    <!-- 9. 底部 Footer -->
    <v-footer class="page-footer">
      <v-container>
        <v-row justify="space-between">
          <v-col cols="auto">
            <div class="footer-section">
              <h4 class="footer-title">企业</h4>
              <a href="#">关于我们</a>
              <a href="#">联系我们</a>
              <a href="#">推广合作伙伴</a>
            </div>
          </v-col>
          <v-col cols="auto">
            <div class="footer-section">
              <h4 class="footer-title">产品与服务</h4>
              <a href="#">服务号</a>
              <a href="#">小程序</a>
            </div>
          </v-col>
          <v-col cols="auto">
            <div class="footer-section">
              <h4 class="footer-title">客户倾向</h4>
              <a href="#">常见问题</a>
              <a href="#">联系客服</a>
            </div>
          </v-col>
        </v-row>
        <v-divider class="my-4"></v-divider>
        <div class="footer-bottom">
          <p>北京观知科技有限公司</p>
          <p>北京市延庆区中关村延庆园长城脚下的公社二期C座345室</p>
          <p>京ICP备12032824号-6</p>
        </div>
      </v-container>
    </v-footer>
    <!-- 4. 新增：图片放大查看器 Dialog -->
    <!-- 7. 全新重构的图片查看器 Dialog -->
    <v-dialog
        v-model="isViewerOpen"
        fullscreen
        hide-overlay
        transition="fade-transition"
    >
      <div class="image-viewer-overlay" @click.self="closeViewer">
        <!-- 关闭按钮 -->
        <v-btn
            icon="mdi-close"
            variant="text"
            class="close-btn"
            @click="closeViewer"
        ></v-btn>

        <!-- 上一张按钮 -->
        <v-btn
            icon="mdi-chevron-left"
            variant="text"
            class="nav-btn prev-btn"
            @click="prevImage"
        ></v-btn>

        <!-- 图片容器 -->
        <div class="image-container">
          <v-img
              :src="currentImageSrc"
              contain
              class="main-image"
          ></v-img>
        </div>

        <!-- 下一张按钮 -->
        <v-btn
            icon="mdi-chevron-right"
            variant="text"
            class="nav-btn next-btn"
            @click="nextImage"
        ></v-btn>
      </div>
    </v-dialog>
  </v-container>
</template>

<style scoped>
/* 顶部导航栏样式 */
.top-nav {
  border-bottom: 1px solid #e0e0e0;
}
.logo-text {
  font-weight: bold;
  color: #e53935; /* 红色 Logo */
  font-size: 24px;
}
.search-bar {
  max-width: 300px;
}

/* 主内容区域样式 */
.main-content {
  padding-top: 64px; /* 避免内容被导航栏遮挡 */
  max-width: 1000px; /* 限制内容最大宽度，使其居中，类似报告样式 */
  margin: 0 auto;
  background-color: #fff;
  padding: 24px;
}

/* 头部（标题区）样式 */
.header-section {
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}
.report-title {
  font-size: 28px;
  font-weight: 500;
  margin-bottom: 12px;
}
.report-meta {
  font-size: 14px;
  color: #888;
}
.report-meta span {
  margin-right: 20px;
}

/* 内容块通用样式 */
.content-block {
  margin-bottom: 40px;
}

/* 图片标题 */
.image-caption {
  text-align: center;
  font-size: 14px;
  color: #666;
  margin-top: 8px;
}

/* 研究报告节点总结框 */
.summary-box {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-left: 4px solid #e53935; /* 左侧红色边框 */
  padding: 20px;
  border-radius: 4px;
}
.summary-title {
  font-size: 18px;
  margin-bottom: 12px;
}
.summary-text {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}

/* 区块标题 */
.section-title {
  font-size: 22px;
  margin-bottom: 20px;
  border-bottom: 2px solid #e53935;
  padding-bottom: 8px;
  display: inline-block;
}

/* 纯文本内容块 */
.text-content {
  line-height: 1.9;
}
.content-subtitle {
  font-weight: bold;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

/* 其他报告列表 */
.other-reports ul {
  list-style: none;
  padding: 0;
}
.other-reports li {
  padding: 8px 0;
  border-bottom: 1px dashed #ddd;
  font-size: 15px;
  cursor: pointer;
  transition: color 0.3s;
}
.other-reports li:hover {
  color: #e53935;
}

/* 页脚样式 */
.page-footer {
  background-color: #ffffff;
  color: #bbb;
  padding: 40px 0;
}
.footer-title {
  color: #353131;
  margin-bottom: 16px;
  font-size: 16px;
}
.footer-section a {
  display: block;
  color: #bbb;
  text-decoration: none;
  margin-bottom: 8px;
  font-size: 14px;
  transition: color 0.3s;
}
.footer-section a:hover {
  color: #fff;
}
.footer-bottom {
  text-align: center;
  font-size: 12px;
  color: #888;
}
.footer-bottom p {
  margin: 4px 0;
}
/* 新增表格样式 */
.policy-table {
  border: 1px solid #dee2e6;
}

.policy-table th, .policy-table td {
  border: 1px solid #dee2e6;
  vertical-align: middle; /* 垂直居中对齐 */
  padding: 12px !important; /* 增加内边距 */
}

.policy-table thead th {
  background-color: #e53935; /* 红色表头背景 */
  color: white !important;
  font-size: 16px;
}

/* 区域单元格样式 (第一列) */
.region-cell {
  font-weight: bold;
  text-align: center;
  background-color: #f8f9fa;
  width: 120px; /* 固定宽度 */
}

/* 资料来源文本样式 */
.source-text {
  font-size: 12px;
  color: #888;
  margin-top: 16px;
  text-align: right;
}
.source-text2 {
  font-size: 12px;
  color: #888;
  margin-top: 16px;
  text-align: left;
}
.zoomable-image {
  border: 1px solid #e0e0e0;      /* 添加一个浅灰色边框 */
  border-radius: 4px;             /* 轻微的圆角 */
  cursor: pointer;                /* 鼠标悬停时显示手型指针 */
  transition: all 0.3s ease;      /* 平滑过渡效果 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* 添加细微阴影 */
}

.zoomable-image:hover {
  transform: scale(1.03);         /* 悬停时轻微放大 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* 悬停时阴影加深 */
}
/* --- 8. 新增：图片查看器专属样式 --- */
.image-viewer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2100; /* 确保在 Vuetify 组件之上 */
}

.image-container {
  width: 90%;
  height: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  color: white;
  font-size: 2rem;
}

.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  font-size: 3rem;
  background-color: rgba(0, 0, 0, 0.3);
}
.nav-btn:hover {
  background-color: rgba(0, 0, 0, 0.6);
}

.prev-btn {
  left: 20px;
}
.next-btn {
  right: 20px;
}
</style>